<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .active {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--  渲染的结果集 -->
        <h2 v-bind:title="title">
            <!--即:: v-bind(即插值文本):title(参数)="title(值（动态变量）)" -->
            <!-- 与 <h2 :title="title"> 效果一致 -->
            <!-- 插值文本 -->
            {{title}}
        </h2>
        <!-- 用户输入   用v-model快速绑定数据 -->
        <p>
            <input type="text" v-model="course" v-on:keydown.enter="addCourse">
            <!-- v-model="course"数据绑定 v-on:事件监听，监听DOM事件。 keydown.enter键值 -->
            <button @click="addCourse">新增数据</button>
            <!-- 监听事件 addCourse 为回调函数 -->
            {{course}}
        </p>
        <!-- 条件渲染 -->
        <p v-if="courses.length == 0">
            <!-- 如果courses长度为0，则显示没有信息，否则v-else(37) -->
            没有任何信息
        </p>
        <div class="course-list" v-else>
            <!-- 列表渲染 -->
            <div v-for="xuanran in courses" :key="xuanran" :class="{active: selectedCourse === xuanran}"
                @click="selectedCourse = xuanran">
                <!-- 实现点击，然后xuanran赋值给selectedCourse,利用class事件实现active效果   -->
                {{xuanran}}
            </div>
            <p> 
                <!-- 绑定表达式 --> 
                <!-- 课程总数：{{courses.length + '门'}} --> 
                <!-- 计算属性实现 --> 
                计算属性实现计算总数：{{courses.length + '门'}} <br>
                <!-- 监听器 --> 
                监听器实现内容总数：{{total2}} 
            </p>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        // 创建vue实例
        const app = new Vue({    // 创建app  保存vue实例
            el: '#app',
            data() {
                return {
                    title: '这是购物车的页面',
                    course: '',
                    selectedCourse: '',
                    // 数据模型
                    courses: ['选项1','选项2'],
                    total2: 0
                }
            },
            methods: {
                addCourse() {
                    // 1.添加course到数组
                    this.courses.push(this.course)
                    // 2.清空course
                    this.course = ''
                }
            },
            computed: {
                // 计算courses的总数
                total() {
                    // 计算属性有缓存性，如果值没有发生变化，则页面不会重新渲染
                    // 返回值如果写进methods，每次值都会重新计算
                    return this.courses.length + '个'
                }
            },
            // 默认情况下watch不会在初始化立刻执行，运行之后才会执行
            // watch用来监控computed的变化，然后发生改变
            // watch: {
            //     courses(newValue, oldValue) {
            //         // 此处的newValue即this.courses.length + '个'
            //         this.total = newValue.length + '个'
            //     }
            // },
            watch: {
                courses: {
                    immediate: true,//立即执行
                    deep: true,
                    handler(newValue, oldValue) {
                        this.total2 = newValue.length + '个'
                    }
                }
            },
        })
    </script>
</body>

</html>